<template>
  <demoBlock title="基础用法" padding>
    <vcu-popover
      v-model:show="showPopover"
      :actions="actions"
      placement="bottom-start"
      @select="onSelect"
    >
      <template #reference>
        <vcu-button type="primary">浅色风格</vcu-button>
      </template>
    </vcu-popover>

    <vcu-popover v-model:show="showPopover1" theme="dark" :actions="actions">
      <template #reference>
        <vcu-button type="primary" style="margin-left: 10px">
          深色风格
        </vcu-button>
      </template>
    </vcu-popover>
  </demoBlock>
</template>


<script>
import { defineComponent, ref } from "vue";
export default defineComponent({
  setup() {
    const showPopover = ref(false);
    const showPopover1 = ref(false);

    // 通过 actions 属性来定义菜单选项
    const actions = [
      { text: "选项一" },
      { text: "选项二" },
      { text: "选项三" },
    ];
    const onSelect = (action) => console.info(action.text);

    return {
      actions,
      onSelect,
      showPopover,
      showPopover1,
    };
  },
});
</script>